<script setup>
import FormAdd from '@/components/common/formAdd.vue'
import { useUserStore } from '@/stores/user'
import { ref, onMounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { getEnterprisePublishPowerApi, insertJobApi } from '@/api/job'
import { showStatusMessage } from '@/utils/common/showMessage'
import { CircleCheckFilled, WarningFilled, UploadFilled, InfoFilled, Document, Money } from '@element-plus/icons-vue'
const userStore = useUserStore()

const formRef = ref(null)
// 表单数据
const form = ref({
  enterpriseName: userStore.userInfo.enterpriseName || '',
  jobName: '',
  jobDesc: '',
  //   工资
  salary: '',
  //位置
  jobLocation: '',
  //   企业详细地址
  jobDetailLocation: '',
  //   任职要求
  jobRequire: '',
  phone: ''
})
// 表单配置
const formOpt = [
  { label: '企业名称', prop: 'enterpriseName', type: 'input', disabled: true },
  { label: '职位名称', prop: 'jobName', type: 'input' },
  { label: '联系电话', prop: 'phone', type: 'input' },
  { label: '职位描述', prop: 'jobDesc', type: 'textarea' },
  { label: '任职要求', prop: 'jobRequire', type: 'textarea' },
  { label: '工资', prop: 'salary', type: 'input' },
  { label: '地址', prop: 'jobLocation', type: 'address' },
  { label: '详细地址', prop: 'jobDetailLocation', type: 'textarea' }
]
const btnOpt = [
  { prop: 'reset', type: 'info', name: '重置' },
  { prop: 'publish', type: 'primary', name: '发布' }
]
const publishPower = ref(0)
// 获取用户信息，判断有无权限发布职位
async function getUserPower() {
  const res = await getEnterprisePublishPowerApi()
  publishPower.value = res.data
  imgUrl.value = res.url

  if (publishPower.value == 1) {
    alertOpt.value.type = 'success'
    alertOpt.value.description = '上传成功，等待管理员审核，预计1-5天'
  }
  if (res.url != null && res.data == 0) {
    alertOpt.value.type = 'error'
    alertOpt.value.description = '未通过审核，请重新上传，注意图片清晰，且为正规企业电子营业执照'
  }
}
getUserPower()
// 表单点击事件
function handleForm(type, value) {
  switch (type) {
    case 'reset':
      formRef.value.reset()
      break
    case 'publish':
      handlePublish(value)
      break

    default:
      break
  }
}
// 发布职位
async function handlePublish(data) {
  const res = await insertJobApi({
    ...data,
    account: userStore.userInfo.account,
    jobLocation: JSON.stringify(data.jobLocation)
  })
  showStatusMessage(res)
  formRef.value.reset()
}
const alertOpt = ref({
  description: '您还未通过企业认证，请先上传营业执照',
  type: 'error'
})
const imgUrl = ref('')
// 文件上传成功的处理
async function handleUploadSuccess(e) {
  showStatusMessage(e)
  imgUrl.value = e.url

  alertOpt.value.type = 'success'
  alertOpt.value.description = '上传成功，等待管理员审核，预计1-5天'
}

// 高德地图问题
// const AMap = ref(null)
// async function initMap() {
//   try {
//     window._AMapSecurityConfig = {
//       securityJsCode: '42abe75c534a35e6f01fe2ecc86c6ade'
//     }
//     const res = await AMapLoader.load({
//       key: 'e817a26a6ac8d82d6b6436308af376d3', // 申请好的Web端开发者Key，首次调用 load 时必填
//       version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
//       plugins: ['AMap.Scale'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
//     })
//     AMap.value = res
//   } catch (error) {
//     console.log(error)
//   }
// }
// function getPosition() {
//   console.log(AMap.value)

//   AMap.value.plugin('AMap.Geolocation', function () {
//     let geolocation = new AMap.value.Geolocation({
//       enableHighAccuracy: true, // 是否使用高精度定位，默认：true
//       timeout: 10000, // 设置定位超时时间，默认：无穷大
//       offset: [10, 20], // 定位按钮的停靠位置的偏移量
//       zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
//       position: 'RB' //  定位按钮的排放位置,  RB表示右下
//     })

//     geolocation.getCurrentPosition(function (status, result) {
//       if (status == 'complete') {
//         onComplete(result)
//       } else {
//         onError(result)
//       }
//     })
//   })
// }
// function onComplete(data) {
//   // data是具体的定位信息
//   console.log(data)
//   const coor = [data.position.lat, data.position.lng]
//   console.log(coor)
//   getPo(coor)
// }

// function onError(data) {
//   // 定位出错
//   console.log(data)
// }

// function getPo(data) {
//   //引入插件，此示例采用异步引入，更多引入方式 https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins
//   AMap.value.plugin('AMap.Geocoder', function () {
//     var geocoder = new AMap.value.Geocoder({
//       city: '青岛市' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
//     })

//     var lnglat = data

//     geocoder.getAddress(lnglat, function (status, result) {
//       if (status === 'complete' && result.info === 'OK') {
//         // result为对应的地理位置详细信息
//         console.log(result)
//       }
//     })
//   })
// }

// onMounted(async () => {
//   await initMap()
//   getPosition()
// })
</script>

<template>
  <div class="page-container">
    <div class="job-wrapper" v-if="publishPower == 2">
      <div class="form-header">
        <h2>发布新职位</h2>
        <p class="subtitle">填写详细的职位信息，帮助求职者更好地了解岗位要求</p>
      </div>

      <div class="form-container">
        <div class="form-layout">
          <div class="tips-section">
            <div class="tips-card">
              <h3>发布提示</h3>
              <ul class="tips-list">
                <li>
                  <el-icon><InfoFilled /></el-icon>
                  <span>请如实填写职位信息，确保信息真实有效</span>
                </li>
                <li>
                  <el-icon><Document /></el-icon>
                  <span>职位描述应当清晰明确，突出岗位核心要求</span>
                </li>
                <li>
                  <el-icon><Money /></el-icon>
                  <span>建议提供具有竞争力的薪资范围</span>
                </li>
              </ul>
            </div>

            <div class="help-card">
              <h3>填写帮助</h3>
              <div class="help-content">
                <div class="help-item">
                  <h4>职位描述建议包含：</h4>
                  <p>• 工作职责和内容</p>
                  <p>• 工作时间和地点</p>
                  <p>• 团队规模和发展机会</p>
                </div>
                <div class="help-item">
                  <h4>任职要求建议包含：</h4>
                  <p>• 学历和专业要求</p>
                  <p>• 工作经验要求</p>
                  <p>• 技能和证书要求</p>
                </div>
              </div>
            </div>
          </div>

          <div class="form-section">
            <FormAdd
              :data="form"
              :formOpt="formOpt"
              :btnOpt="btnOpt"
              :inline="false"
              @handleForm="handleForm"
              ref="formRef"
            ></FormAdd>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no-power-wrap">
      <div class="content-box">
        <div class="status-message" :class="alertOpt.type">
          <i class="el-icon" v-if="alertOpt.type === 'success'">
            <el-icon><CircleCheckFilled /></el-icon>
          </i>
          <i class="el-icon" v-else>
            <el-icon><WarningFilled /></el-icon>
          </i>
          <span>{{ alertOpt.description }}</span>
        </div>

        <div class="upload-section">
          <template v-if="imgUrl">
            <h3>已上传的营业执照</h3>
            <div class="image-preview">
              <el-avatar shape="square" :size="350" fit="cover" :src="imgUrl" />
            </div>
          </template>

          <template v-if="!imgUrl && publishPower == 0">
            <div class="upload-header">
              <h3>请上传营业执照</h3>
              <p class="upload-tip">支持 jpg、png 格式，文件大小不超过 5MB</p>
            </div>
            <el-upload
              class="upload-demo"
              drag
              action="http://127.0.0.1:3007/info/uploadBusinessLicense"
              :on-success="handleUploadSuccess"
              :limit="1"
              ref="uploadRaef"
              :headers="{ authorization: userStore.token }"
            >
              <div class="upload-content">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                  <p>拖拽文件到此处或</p>
                  <em>点击上传</em>
                </div>
              </div>
            </el-upload>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
}

.job-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  animation: fadeIn 0.5s ease;

  .form-header {
    text-align: center;
    margin-bottom: 30px;

    h2 {
      font-size: 28px;
      color: #303133;
      margin-bottom: 12px;
      font-weight: 600;

      &::after {
        content: '';
        display: block;
        width: 40px;
        height: 3px;
        background: #409eff;
        margin: 12px auto 0;
        border-radius: 2px;
      }
    }

    .subtitle {
      color: #909399;
      font-size: 16px;
    }
  }

  .form-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 32px;
    margin-bottom: 40px;

    .form-layout {
      display: flex;
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .tips-section {
      width: 300px;
      flex-shrink: 0;
      position: sticky;
      top: 20px;
      max-height: calc(100vh - 40px);
      overflow-y: auto;

      .tips-card, .help-card {
        background: #f5f7fa;
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 24px;

        h3 {
          font-size: 16px;
          color: #303133;
          margin-bottom: 16px;
          font-weight: 600;
          display: flex;
          align-items: center;
          
          &::before {
            content: '';
            width: 4px;
            height: 16px;
            background: #409eff;
            margin-right: 8px;
            border-radius: 2px;
          }
        }
      }

      .tips-list {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          display: flex;
          align-items: flex-start;
          color: #606266;
          font-size: 14px;
          line-height: 1.6;
          margin-bottom: 16px;
          
          &:last-child {
            margin-bottom: 0;
          }

          .el-icon {
            color: #409eff;
            margin-right: 8px;
            margin-top: 3px;
            font-size: 16px;
          }
        }
      }

      .help-content {
        .help-item {
          margin-bottom: 16px;
          
          &:last-child {
            margin-bottom: 0;
          }

          h4 {
            font-size: 14px;
            color: #303133;
            margin-bottom: 8px;
            font-weight: 500;
          }

          p {
            color: #606266;
            font-size: 13px;
            margin: 0 0 4px;
            line-height: 1.6;
            
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }

    .form-section {
      flex: 1;
      min-width: 0;
      padding-bottom: 60px;

      :deep(.el-form) {
        .el-form-item {
          margin-bottom: 24px;

          &:last-child {
            margin-bottom: 0;
            padding-top: 24px;
            border-top: 1px solid #ebeef5;
            position: sticky;
            bottom: 0;
            background: white;
            z-index: 1;

            .el-form-item__content {
              display: flex;
              justify-content: center;
              gap: 20px;

              .el-button {
                margin: 0;
                padding: 12px 24px;
                font-weight: 500;
                min-width: 120px;

                &:hover {
                  transform: translateY(-1px);
                }
              }
            }
          }

          .el-form-item__label {
            font-weight: 500;
            padding-bottom: 8px;
            color: #303133;
          }

          .el-input__wrapper,
          .el-textarea__wrapper {
            box-shadow: 0 0 0 1px #dcdfe6;
            transition: all 0.3s ease;

            &:hover {
              box-shadow: 0 0 0 1px #409eff;
            }

            &.is-focus {
              box-shadow: 0 0 0 1px #409eff;
            }
          }

          .el-textarea__wrapper {
            padding: 8px 12px;
          }
        }
      }
    }
  }
}

.no-power-wrap {
  width: 100%;
  min-height: calc(100vh - 120px);
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;

  .content-box {
    width: 100%;
    max-width: 680px;
  }

  .status-message {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    background: #fff;
    border: 1px solid transparent;
    transition: all 0.3s ease;

    &.success {
      border-color: #e1f3d8;
      background-color: #f0f9eb;
      color: #67c23a;

      .el-icon {
        color: #67c23a;
      }
    }

    &.error {
      border-color: #fde2e2;
      background-color: #fef0f0;
      color: #f56c6c;

      .el-icon {
        color: #f56c6c;
      }
    }

    .el-icon {
      font-size: 20px;
      margin-right: 12px;
    }

    span {
      line-height: 1.6;
      font-weight: 500;
    }
  }

  .upload-section {
    background-color: #fff;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    .upload-header {
      text-align: center;
      margin-bottom: 32px;
    }

    h3 {
      font-size: 20px;
      color: #303133;
      margin-bottom: 8px;
      font-weight: 600;
    }

    .upload-tip {
      color: #909399;
      font-size: 14px;
    }

    .image-preview {
      display: flex;
      justify-content: center;
      padding: 20px;
      background: #f5f7fa;
      border-radius: 8px;

      .el-avatar {
        border-radius: 8px;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.02);
        }
      }
    }

    .upload-demo {
      border: 2px dashed #e4e7ed;
      border-radius: 8px;
      transition: all 0.3s ease;
      background: #f5f7fa;

      &:hover {
        border-color: #409eff;
        background-color: #f5f7fa;
      }

      .upload-content {
        padding: 40px 0;

        .el-icon--upload {
          font-size: 48px;
          color: #909399;
          margin-bottom: 16px;
        }
      }
    }

    .el-upload__text {
      p {
        margin: 0;
        color: #606266;
        font-size: 14px;
      }

      em {
        color: #409eff;
        font-style: normal;
        margin-left: 4px;
        font-weight: 500;

        &:hover {
          color: #66b1ff;
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tips-section {
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #dcdfe6;
    border-radius: 3px;
    
    &:hover {
      background-color: #c0c4cc;
    }
  }

  &::-webkit-scrollbar-track {
    background-color: #f5f7fa;
  }
}

@media screen and (max-width: 1200px) {
  .form-container {
    .form-layout {
      flex-direction: column;
    }

    .tips-section {
      position: static;
      width: 100%;
      max-height: none;
      overflow: visible;
    }
  }
}

@media screen and (max-width: 768px) {
  .form-container {
    .tips-section {
      flex-direction: column;
    }
  }
}
</style>
